document.addEventListener('DOMContentLoaded', (event) => {

  const carousel = document.querySelector('.carousel-inner');


  const items = document.querySelectorAll('.carousel-item');


  const totalItems = items.length;


  let currentIndex = 0;


  const prevButton = document.querySelector('.carousel-control-prev');


  const nextButton = document.querySelector('.carousel-control-next');


  function showSlide(index) {


    if (index >= totalItems) {


      currentIndex = 0;


    } else if (index < 0) {


      currentIndex = totalItems - 1;


    } else {


      currentIndex = index;


    }


    carousel.style.transform = `translateX(-${currentIndex * 100}%)`;


  }


  function nextSlide() {


    showSlide(currentIndex + 1);


  }


  function prevSlide() {


    showSlide(currentIndex - 1);


  }


  prevButton.addEventListener('click', prevSlide);


  nextButton.addEventListener('click', nextSlide);


  setInterval(nextSlide, 3000);


});

